<template>
  <cu-layout navbar="custom" title="111">
    <view class="index">
      <view class="index-bg">
        <image style="display: block; width: 100%;" src="@/static/img/index-bg.png" mode="widthFix" />
      </view>
      <view class="index-box">
        <view class="py-15 px-20 text-white">
          <view class="text-right underline" style="color: #a4ffff; cursor: pointer;" @click="$.router.back()">暂不绑定</view>
          <view class="">
            <view class="text-20 font-600">温馨提示</view>
            <view class="text-15 leading-24 mt-10 pb-5">扫描或输入设备号绑定设备，可随时查看流量使用情况</view>
          </view>
        </view>
        <view class="px-15">
          <view class="bind-card">
            <view class="mb-15">
              <uv-input v-model="state.code" :font-size="16" :custom-style="{padding: '10px'}" placeholder="请输入ICCI号">
                <template #suffix>
                  <view class="flex"><text class="iconfont icon-saoma text-24 leading-24" @click="onScan('code')" /></view>
                </template>
              </uv-input>
            </view>
            <view class="mb-20">
              <uv-input v-model="state.imei" :font-size="16" :custom-style="{padding: '10px'}" placeholder="请输入IMEI号">
                <template #suffix>
                  <view class="flex"><text class="iconfont icon-saoma text-24 leading-24" @click="onScan('imei')" /></view>
                </template>
              </uv-input>
            </view>
            <view class="">
              <uv-button size="large" :loading="state.loading" :disabled="!state.code || !state.code" type="primary" :color="`linear-gradient(to right, ${$.color.primary}, ${$.color.primaryDark})`" @click="save">
                <view class="px-5">绑定</view>
              </uv-button>
            </view>
          </view>
        </view>

        <view v-show="!!state.searchList.length" class="p-15">
          <view class="bind-log">
            <uv-cell-group title="搜索历史">
              <uv-cell v-for="item in state.searchList" :key="item.id" icon="tags" :arrow="false" :title="item.code" @click="clickLog(item)">
                <template #right-icon>
                  <view class="" @click.stop="remove(item.id)">
                    <uv-icon :color="$.color.error" size="20" name="trash" />
                  </view>
                </template>
              </uv-cell>
            </uv-cell-group>
          </view>
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script setup>
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import $ from '@/sheep'

const state = reactive({
  code: '',
  imei: '',
  loading: false,
  searchList: []
})

onLoad(async() => {
  reload()
})

function onScan(keyName = 'code') {
  $.utils.scanQRCode().then(res => {
    const str = res.resultStr || res.result
    if (str) {
      const strs = str.split(',')
      state[keyName] = strs[strs.length - 1]
      reload()
    }
  }, () => {
    $.utils.toast('扫码失败')
  })
}

function remove(id) {
  $.get('/user/searchDel', { id }).then(res => {
    reload()
    $.utils.toast(res.msg)
  })
}

function reload() {
  $.get('/user/searchList').then(res => {
    if (res.code === 0) {
      state.searchList = res.data
    }
  })
  // /user/searchAgent
}

function clickLog(data) {
  state.code = data.code || ''
  state.imei = data.imei || ''
}

function save() {
  state.loading = true
  $.get('/user/searchAgent', { code: state.code, imei: state.imei }).then(res => {
    if (res.success) {
      $.store('user').getAgent(res.data.id).then(() => {
        $.router.redirect('/pages/index/index')
      })
    } else {
      $.utils.toast(res.msg)
      reload()
    }
    state.loading = false
  })
}

// #ifdef H5
setTimeout(() => {
  $.utils.wxShare()
}, 500)
// #endif
</script>

<style lang="scss" scoped>
.index {
	position: relative;
}
.index-bg {
	position: absolute;
	z-index: 1;
	width: 100%;
	left: 0;
	top: 0;
	background-image: linear-gradient(to bottom, #8494f4 0%,  #b4c0f4 70%, #f5f5f7 100%);
	padding-bottom: 300rpx;
}
.index-box {
	position: relative;
	z-index: 2;
}
.bind-card {
	padding: 50rpx 40rpx;
}
.bind-card, .bind-log {
	background-color: #fff;
	border-radius: 12rpx;
	// border-top: 1px solid #f5f5f5;
	box-shadow: 0 1px 3px #d9d5d5;
}
.top {
	color: #fff;
	height: 320rpx;
	padding: 0 100rpx;
	text-align: center;
	background-image: linear-gradient(0deg, $uv-primary-dark, $uv-primary 50%);
}
</style>
